<template>
	<view class="content">
		<u-sticky bgColor="#fff">
			<view class="header">
				<u-tabs
				:list="lists" 
				lineColor="#2773EF" 
				:current="0"  
				:activeStyle="{color:'#2773EF'}"
				:lineWidth="tabWidth"
				@change="handleChange"
				:scrollable="false"
				></u-tabs>
			</view>
		</u-sticky>
		<view class="products">
			<view class="item" v-for="item,index in products" :key="index">
				<view class="title">
					<text class="nooo">入库单：RK202302401</text>
					<u-image src="/static/img/home/edit.png" width="12" height="12"></u-image>
				</view>
				<view class="info">
					<view class="marks">
						<text>入库时间：2023-10-24</text>
						<text>入库数量：1</text>
						<text>操作人：杨天真</text>
					</view>
					<view>
						<u-image src="/static/img/logo.png" width="88" height="88"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view class="addDistIn">
			<u-button text="新增原料入库" type="primary"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[{name:'已完成',},{name:'未审核',},{name:'待入库',}],
				index:0,
				tabWidth:0,
				products:[1,2,3,4,5,6,7,8]
			}
		},
		onLoad() {
			
		},
		onReady() {
			
		},
		methods: {
			handleChange(e){
				this.tabWidth = e.rect.width - 24;
				this.index=e.index;
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: rgb(248, 248, 248);
		font-size: 24rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
	}
	.header{
		height: 96rpx;
		background-color: #fff;
	}
	.products{
		display: flex;
		flex-direction: column;
		padding: 0 32rpx 0 32rpx;
		margin-bottom: 110rpx;
		
	}
	.item{
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		border-radius: 10rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 32rpx;
	}
	.title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 2rpx solid rgb(204, 204, 204);
		padding-bottom: 32rpx;
	}
	.info{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 32rpx;
	}
	.marks{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 136rpx;
	}
	.addDistIn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>